// 导航栏组件
import { navigateTo } from '../router/index.js';

function Navbar() {
  const navbar = document.createElement('nav');
  navbar.className = 'sticky top-0 bg-white/95 backdrop-blur-sm z-50 border-b border-gray-200 shadow-sm';
  
  // 导航栏内容
  navbar.innerHTML = `
    <div class="container mx-auto px-4 md:px-8">
      <div class="flex justify-between items-center h-16 md:h-20">
        <!-- Logo 区域 -->
        <div class="flex items-center space-x-2">
          <div id="logo" class="text-2xl font-bold text-primary flex items-center cursor-pointer">
            <i class="fa fa-sitemap mr-2"></i>
            <span>MSRM3</span>
          </div>
        </div>
        
        <!-- 桌面端导航链接 -->
        <div class="hidden md:flex space-x-8">
          <button class="nav-link active" data-target="/">首页</button>
          <button class="nav-link" data-target="/features">功能模块</button>
          <button class="nav-link" data-target="/usecases">场景解决方案</button>
          <button class="nav-link" data-target="/technology">技术架构</button>
          <button class="nav-link" data-target="/changelog">更新日志</button>
          <button class="nav-link" data-target="/download">下载中心</button>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <div class="md:hidden">
          <button id="mobile-menu-button" class="text-gray-600 hover:text-primary transition-colors duration-200">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
      <div class="container mx-auto px-4 py-2">
        <button class="mobile-nav-link active w-full text-left px-4 py-3" data-target="/">首页</button>
        <button class="mobile-nav-link w-full text-left px-4 py-3" data-target="/features">功能模块</button>
        <button class="mobile-nav-link w-full text-left px-4 py-3" data-target="/usecases">场景解决方案</button>
        <button class="mobile-nav-link w-full text-left px-4 py-3" data-target="/technology">技术架构</button>
        <button class="mobile-nav-link w-full text-left px-4 py-3" data-target="/changelog">更新日志</button>
        <button class="mobile-nav-link w-full text-left px-4 py-3" data-target="/download">下载中心</button>
      </div>
    </div>
  `;
  
  // 添加导航事件监听
  navbar.querySelector('#logo').addEventListener('click', () => navigateTo('/'));
  
  // 桌面端导航链接事件
  navbar.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
      const target = link.getAttribute('data-target');
      navigateTo(target);
      
      // 更新活动链接状态
      navbar.querySelectorAll('.nav-link').forEach(navLink => {
        navLink.classList.remove('active');
      });
      link.classList.add('active');
    });
  });
  
  // 移动端菜单切换
  const mobileMenuButton = navbar.querySelector('#mobile-menu-button');
  const mobileMenu = navbar.querySelector('#mobile-menu');
  
  mobileMenuButton.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
    // 切换图标
    const icon = mobileMenuButton.querySelector('i');
    if (icon.classList.contains('fa-bars')) {
      icon.classList.remove('fa-bars');
      icon.classList.add('fa-times');
    } else {
      icon.classList.remove('fa-times');
      icon.classList.add('fa-bars');
    }
  });
  
  // 移动端导航链接事件
  navbar.querySelectorAll('.mobile-nav-link').forEach(link => {
    link.addEventListener('click', () => {
      const target = link.getAttribute('data-target');
      navigateTo(target);
      
      // 关闭移动端菜单
      mobileMenu.classList.add('hidden');
      const icon = mobileMenuButton.querySelector('i');
      icon.classList.remove('fa-times');
      icon.classList.add('fa-bars');
      
      // 更新活动链接状态
      navbar.querySelectorAll('.mobile-nav-link').forEach(navLink => {
        navLink.classList.remove('active');
      });
      link.classList.add('active');
    });
  });
  
  return navbar;
}

export default Navbar;